<template>
  <div style="padding: 10px">
    <a-tabs
      style="background: #ffff; height: 100%"
      v-model:activeKey="activeKey"
    >
      <a-tab-pane key="1" tab="人员管理">
        <BusinessPersonnel :activeKey="activeKey" :villageOptions="villageList"/>
      </a-tab-pane>
      <a-tab-pane key="2" tab="招商团队">
        <BusinessTeam :activeKey="activeKey" :villageOptions="villageList"/>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
import {
  defineComponent,
  ref,
  createVNode,
  reactive,
  computed,
  watch,
  toRefs,
} from "vue";
import request from "../../../common/utils/request";
import BusinessTeam from "@/views/village/BusinessManage/modules/BusinessTeam.vue";
import BusinessPersonnel from "@/views/village/BusinessManage/modules/BusinessPersonnel.vue";


export default defineComponent({
  name: "teamManagement",
  components: {
    BusinessTeam,
    BusinessPersonnel,
  },
  setup() {
    const state = reactive({
      activeKey: '1',
      villageList: [],
    });

    const getVillageList = () => {
      request
        .get("/org", "/build/villageAndBuildList/v2", {})
        .then((res) => {
          let vList = [];
          res.villageList.forEach((item) => {
            vList.push({
              label: item.name,
              value: item.id,
            });
          });
          state.villageList = vList;
        });
    };
    const init = () => {
      getVillageList();
    };


    init();

    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>

</style>
